<template>
  <div class="recommend">
    <van-nav-bar fixed placeholder :title="title" left-arrow @click-left="onClickLeft" />
    <div class="recommend_box">
      <div class="recommend_box_top">
        <img src="../../assets/img/other/recommend_text.png" alt="">
      </div>
      <div class="recommend_box_card">
        <img class="recommend_box_card_title" src="../../assets/img/other/recommend_title1.png" alt="">
        <img class="recommend_box_card_img" src="../../assets/img/other/recommend_img1.png" alt="">
      </div>
      <div class="recommend_box_card">
        <img class="recommend_box_card_title" src="../../assets/img/other/recommend_title2.png" alt="">

        <div class="recommend_box_card_form">
          <van-cell-group inset>
            <van-field maxlength="10" v-model="form.name" placeholder="请输入朋友的姓名" />
            <van-field type="tel" maxlength="11" v-model="form.phone" placeholder="请输入朋友的手机号" />
          </van-cell-group>
        </div>
      </div>
      <div class="recommend_box_btn">
        <van-button round @click="recommendFriend">立即推荐</van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { recommendFriendAPI } from '@/api/common'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant';

// 手机号正则
const pattern = /^1[3456789]\d{9}$/
const router = useRouter()
const title = ref('推荐好友')
const form = ref({
  name: '',
  phone: ''
})

// 返回上一页
const onClickLeft = () => {
  router.back()
}


// 立即推荐
const recommendFriend = () => {
  if (!pattern.test(form.value.phone)) {
    showToast('请输入正确的手机号码')
    return
  }
  if (!form.value.name) {
    showToast('请输入朋友的姓名')
    return
  }
  if (!form.value.phone) {
    showToast('请输入朋友的手机号')
    return
  }

  recommendFriendAPI(form.value).then(res => {
    console.log(res)
    showToast('推荐成功')

    setTimeout(() => {
      router.back()
    }, 1000)
  })
}

</script>

<style lang="scss" scoped>
.recommend {
  width: 100%;
  height: 100vh;
  overflow: auto;
  background: url("../../assets/img/other/recommend_bg.png") 0 0 no-repeat, linear-gradient(180deg, rgba(245, 102, 108, 1) 0%, rgba(250, 166, 102, 1) 100%);
  background-position: 0 .8rem;
  background-size: 100%;

  &_box {
    padding: 1.0667rem .5333rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    &_top {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: .5333rem;

      img {
        width: 100%;
        height: auto;
      }
    }

    &_card {
      width: calc(100% - 1.0667rem);
      padding: .5333rem;
      display: flex;
      justify-content: center;
      background-color: #fffaf1;
      border-radius: .16rem;
      margin-top: 1.6rem;
      position: relative;

      &_title {
        width: 100%;
        height: auto;
        position: absolute;
        top: -0.6rem;
      }

      &_img {
        width: 100%;
        height: auto;
        margin-top: .5333rem;
      }

      &_form {
        width: 100%;
        margin-top: .5333rem;

        :deep(.van-cell-group--inset) {
          margin: 0;
        }

        :deep(.van-cell) {
          background-color: #ffffff;
        }
      }
    }

    &_btn {
      width: 100%;
      margin-top: 1.6rem;

      :deep(.van-button) {
        width: 100%;
        height: 1.3333rem;
        font-size: .4rem;
        font-weight: 900;
        color: #fff;
        background-color: rgba(245, 102, 108, 1);
        border-radius: 1.2rem;
        border: none;
        box-shadow: 0 2px 2px rgb(236, 139, 143);
      }
    }
  }
}
</style>